<template>
	<img class="upload" @click.prevent="GetUploadImage()" src="../../assets/album.png" />
</template>

<script>
import wx from 'weixin-js-sdk'
import {hex_sha1} from './hex_sha1.js'//生成签名的js

export default {
    data(){
        return{
            ticketid:"",
		}
	},
	methods:{
		GetJsApiToken(){
			let _this=this;
			this.$http.get('/ChatService/UserPageMessage/GetJsApiToken').then(function(res) {
				// console.log(res);
				if(res.status=="200"){
					_this.ticketid= res.data
				}
			},function(rej) {
                window.location.reload(true)
            })
		},
		//调用微信上传图片接口获取mediaId
		GetUploadImage(){
            let _this=this;
            let appId="wx17e0127ade376e4b";
            let timestamp=(new Date()).getTime().toString().substring(0,10);//时间戳只需要10位
			let ticketid=this.ticketid;//"bxLdikRXVbTPdHSM05e5uwAeCJu8FwFG-XgOiXOflsg1OXUe9650OlI181UD3ZvF1TOu8dgONUT47-8ppLE9Ug";
			let pageurl=window.location.href;//当前页面地址
			let sig=hex_sha1('jsapi_ticket='+ticketid+'&noncestr=moodtest&timestamp='+ timestamp + '&url='+ pageurl);//生成签名
			console.log('加密后生产的签名：'+sig)
            wx.config({
                // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                // debug: true,
                // 必填，公众号的唯一标识
                appId: appId,
                // 必填，生成签名的时间戳
                timestamp:""+timestamp,
                // 必填，生成签名的随机串
                nonceStr:"moodtest",
                // 必填，签名，见附录1
                signature:sig,
                // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
                jsApiList : [ 'checkJsApi', 'chooseImage','uploadImage','downloadImage' ]
            });
            wx.error(function (res) {
				console.log("出错了：");//这个地方的好处就是wx.config配置错误，会弹出窗口哪里错误，然后根据微信文档查询即可。
				console.log(res);
				
            });
            wx.ready(function () {
                wx.checkJsApi({
                    jsApiList: ['chooseImage','uploadImage','downloadImage'],
                    success: function (res) {
						console.log(res);
                    }
				});
				//拍照或从手机相册中选图
                wx.chooseImage({
                    count: 1, // 默认9
					sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
					success: function (res) {
						var localIds = res.localIds[0]; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
						//上传图片到微信服务器
						wx.uploadImage({
							localId: localIds, // 需要上传的图片的本地ID，由chooseImage接口获得
							isShowProgressTips: 1, // 默认为1，显示进度提示
							success: function (serverImg) {
								console.log("上传图片到微信服务器serverId返回值")
								console.log(serverImg.serverId)
								_this.GetImagePath(serverImg.serverId);//根绝mediaId上传图片
							}
						});
					}
				});
			}); 
		},
		//获取图片附件服务地址
		GetImagePath(mediaId){
			// let serverSrc= this.global.serverSrc;
			let _this=this;
			this.$http.get('/ChatService/UserPageMessage/UserUploadImg?mediaId='+mediaId)
			.then(function (res){
				console.log('GetImagePath:');
				console.log(res);
				
				if(res.status=="200"){
					let imgData=res.data
					// _this.imgSrc=imgData.myFilePath;
					_this.$emit('ablumSelected',imgData)
				}else {
					console.log(res.data.failMessage);
				}
			});
		}
	},
	mounted:function(){
		this.GetJsApiToken();//获取token
	},
}
</script>

<style lang="scss" scoped>
.upload {
	width: 28px;
	height:28px;
	padding: 10px 5px 10px 10px;
	box-sizing: content-box;
	vertical-align: middle;
}
</style>

